<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/shop_head.css" />
		<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function init() {
				var APP_ID = 'c4w6bVvWfh8xxcmkBE1G0gIt-gzGzoHsz';
				var APP_KEY = 'JBikg4Ksk76zcTi5BKYWvTJF';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
			}
			init();
			if(AV.User.current() == null) {
				location.href = "login.html?RetUrl=" + encodeURI(location.href);
			}
		</script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			a {
				list-style-type: none;
			}
			
			input {
				cursor: pointer;
			}
			
			body,
			html {
				background-image: url(img/shop/shop_body_list_head.png);
			}
			
			.cart_footer {
				position: fixed;
				background-color: white;
				bottom: 0px;
				height: 50px;
				border: 1px solid #999;
				width: 100%;
			}
			
			.cart_footer_paying {
				width: 1000px;
				height: 100%;
				margin: auto;
				position: relative;
			}
			
			.cart_absolute {
				position: absolute;
			}
			
			.cart_footer_paying input {
				top: 0px;
				bottom: 0px;
				margin: auto 10px;
			}
			
			.cart_footer_paying_delShopList {
				font-size: 12px;
			}
			
			.cart_footer_payBtn {
				height: 50px;
				width: 100px;
				font-size: 20px;
				font-weight: bolder;
				font-family: "微软雅黑";
				color: white;
				background-color: #E64346;
				line-height: 50px;
				text-align: center;
				border-left: 1px solid;
				display: block;
				position: absolute;
				right: 0px;
			}
			
			.cart_content_top span {
				line-height: 50px;
				font-size: 12px;
				color: #777777;
			}
			
			.cart_footer_checkTxt,
			.cart_content_top_checkTxt {
				left: 30px;
			}
			
			.cart_footer_checkTxt {
				font-size: 12px;
				line-height: 50px;
				color: #777777;
			}
			
			.cart_footer_paying_delShopList {
				margin-left: 60px;
				left: 60px;
				line-height: 50px;
				color: #777777;
			}
			
			.cart_footer_txt {
				font-size: 12px;
				line-height: 50px;
				color: #777777;
				right: 300px;
			}
			
			.cart_footer_txt span {
				font-size: 18px;
				color: #FF0022;
			}
			
			.cart_footer_sum {
				font-size: 12px;
				color: #777777;
				right: 180px;
				line-height: 50px;
			}
			
			.cart_footer_sum .sum {
				font-size: 18px;
				color: #FF0022;
			}
			
			.cart_content {
				background-color: #FFFFFF;
				width: 1000px;
				margin: auto;
				margin-top: 20px;
				min-height: 800px;
			}
			
			.cart_content_top {
				height: 50px;
				width: 100%;
				position: relative;
				background-color: #F3F3F3;
				border: 1px solid #E0E0E0;
			}
			
			.cart_content_top input {
				top: 0px;
				bottom: 0px;
				margin: auto 10px;
			}
			
			.cart_content_top_shopTxt {
				left: 100px;
			}
			
			.cart_content_top_priceTxt {
				left: 600px;
			}
			
			.cart_content_top_numTxt {
				left: 700px;
			}
			
			.cart_content_top_sumTxt {
				left: 800px;
			}
			
			.cart_content_top_delTxt {
				left: 900px;
			}
			
			.cart_content_shopList {
				/*min-height: 750px;*/
				margin-bottom: 50px;
			}
			
			.cart_content_shopList_tab {
				border: 1px solid #F1F1F1;
				position: relative;
				width: 100%;
				height: 100px;
				margin-top: 10px;
				background-color: #fff;
			}
			
			.cart_content_shopList_tab input {
				top: 20px;
				left: 10px;
			}
			
			.cart_content_shopList_tab_img {
				top: 10px;
				left: 50px;
				width: 80px;
				height: 80px;
				border: 1px solid #EEEEEE;
			}
			
			.cart_content_shopList_name {
				top: 30px;
				left: 150px;
				width: 300px;
				color: #666666;
				word-wrap: break-word;
				font-size: 14px;
			}
			
			.cart_content_shopList_tab_price {
				top: 30px;
				left: 590px;
			}
			
			.cart_content_shopList_tab_num {
				list-style-type: none;
				width: 60px;
				border: 1px solid #CACBCB;
				top: 30px;
				left: 680px;
				text-align: center;
			}
			
			.cart_content_shopList_tab_num li {
				float: left;
			}
			
			.cart_content_shopList_tab_num li:nth-child(1),
			.cart_content_shopList_tab_num li:nth-child(3) {
				width: 15px;
				cursor: pointer;
			}
			
			.cart_content_shopList_tab_num li:nth-child(2) {
				width: 25px;
				border-left: 1px solid #CACBCB;
				border-right: 1px solid #CACBCB;
			}
			
			.cart_content_shopList_tab_sum {
				top: 30px;
				left: 790px;
			}
			
			.cart_content_shopList_tab_sum span {
				font-weight: 700;
			}
			
			.cart_content_shopList_tab_del {
				top: 32px;
				left: 900px;
				font-size: 14px;
				color: #666666;
				cursor: pointer;
			}
			
			.cart_checked_color {
				background-color: #FFF4E8;
			}
		</style>
	</head>

	<body>
		<div id="shop_head">
			<div id="base_top_bg">
				<div class="base_top_navDiv">
					<div class="base_top_logo" onclick="location.href='index.html'"></div>

					<ul class="base_top_nav">
						<li class="w42" id="index_dl">登录</li>
						<li class="w40" id="index_tcdl" onclick="location.href='register.html'"></li>
						<li class="w40" onclick="location.href='shop.html'"></li>
						<li class="w56" id="base_gwc">购物车</li>
						<li></li>
						<li class="w40"></li>
						<li class="w40"></li>
						<li class="w40"></li>
					</ul>
					<div id="base_dlcg"></div>

					<img class="base_weixin" src="img/index/index_weixin1.png" />
					<img class="base_weibo" src="img/index/index_weibo1.png" />
					<img class="base_weitao" src="img/index/index_weitao1.png" />
				</div>
			</div>
			<ul id="base_leftAdd_content">
				<li>
					<a href="news.html">资讯</a>
				</li>
				<li>
					<a href="join.html">加盟</a>
				</li>
				<li>
					<a href="job.html">纳贤</a>
				</li>
				<li>
					<a href="woker.html">匠人</a>
				</li>
				<li>
					<a href="cooperation.html">合作</a>
				</li>
				<li>
					<a href="actor.html">选角</a>
				</li>
				<li>
					<a href="media.html">媒体</a>
				</li>
			</ul>
			<div id="base_leftAdd">
				<span></span>
			</div>
			<!--模拟客服开始-->
			<div id="top"></div>
			<div id="main">
				<span id="base_guanbi"></span>
				<div id="txt">花笙记客服代表</div>
				<div id="show">
					<span class="show_span">很高兴为您服务！</span>
				</div>
				<input type="text" name="text" id="text" value="" />
				<input type="button" style="cursor: pointer;" id="send" value="发送" />
			</div>
			<!--模拟客服结束-->
		</div>
		<div id="shop_nav">
			<div id="shop_nav_icon">
				<ul id="img_icon">
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
				</ul>
				<ul id="font_icon">
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

		<div class="cart_content">
			<div class="cart_content_top">
				<input type="checkbox" checked class="cart_absolute" />
				<span class="cart_content_top_checkTxt cart_absolute">全选</span>
				<span class="cart_content_top_shopTxt cart_absolute">商品</span>
				<span class="cart_content_top_priceTxt cart_absolute">单价</span>
				<span class="cart_content_top_numTxt cart_absolute">数量</span>
				<span class="cart_content_top_sumTxt cart_absolute">小计</span>
				<span class="cart_content_top_delTxt cart_absolute">操作</span>
			</div>
			<div class="cart_content_shopList">
				<!--<div class="cart_content_shopList_tab cart_checked_color">
					<input type="checkbox" checked="checked" class="cart_absolute" />
					<img class="cart_absolute cart_content_shopList_tab_img" src="img/cart/cart.jpg" />
					<div class="cart_content_shopList_name cart_absolute">蓝盛Type-C转换头3.0usb HUB分线器苹果mac12/新款pro13/15转换器 素雅</div>
					<span class="cart_content_shopList_tab_price cart_absolute">￥<span>199</span></span>
					<ul class="cart_content_shopList_tab_num cart_absolute">
						<li class="cart_content_shopList_tab_num_reduce">-</li>
						<li class="cart_content_shopList_tab_num_shuzi">1</li>
						<li class="cart_content_shopList_tab_num_add">+</li>
					</ul>
					<span class="cart_content_shopList_tab_sum cart_absolute">￥<span>199</span></span>
					<span class="cart_content_shopList_tab_del cart_absolute">删除</span>
				</div>-->
			</div>
		</div>
		<div class="cart_footer">
			<div class="cart_footer_paying">
				<input type="checkbox" checked="checked" class="cart_absolute" />
				<span class="cart_footer_checkTxt cart_absolute">全选</span>
				<a href="javascript:;"><span class="cart_footer_paying_delShopList cart_absolute">删除选中的商品</span></a>
				<span class="cart_absolute cart_footer_txt">已选择 <span>0</span> 件商品</span>
				<span class="cart_absolute cart_footer_sum">总价： <span style="color: red;">￥</span><span class="sum">0</span></span>
				<a href="#"><span class='cart_footer_payBtn'>去结算</span></a>
			</div>
		</div>
	</body>
	<script src="js/shop_head.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		//动态添加
		var checkLength;
		var query = new AV.Query('HSJ_cart');
		query.descending('createdAt');
		var user = getidurl("User");
		query.contains('owner', user);
		query.find().then(function(products) {
			// 查询到商品后，在前端展示到相应的位置中。
			for(var i = 0; i < products.length; i++) {
				var zongjia = (products[i].attributes.cartprice) * (products[i].attributes.cartnum);
				var div = '<div class="cart_content_shopList_tab cart_checked_color"><input  type="checkbox" checked="checked" class="cart_absolute" /><img class="cart_absolute cart_content_shopList_tab_img" src=' + products[i].attributes.cartimg + ' /><div class="cart_content_shopList_name cart_absolute">' + products[i].attributes.cartname + '</div><span class="cart_content_shopList_tab_price cart_absolute">￥<span>' + products[i].attributes.cartprice + '</span></span><ul class="cart_content_shopList_tab_num cart_absolute"><li class="cart_content_shopList_tab_num_reduce" onclick="myreduce(\'' + products[i].id + '\',this)">-</li><li class="cart_content_shopList_tab_num_shuzi">' + products[i].attributes.cartnum + '</li><li class="cart_content_shopList_tab_num_add" onclick="myadd(\'' + products[i].id + '\',this)">+</li></ul><span class="cart_content_shopList_tab_sum cart_absolute">￥<span>' + zongjia + '</span></span><span myid="' + products[i].id + '" class="cart_content_shopList_tab_del cart_absolute">删除</span></div>';
				$(".cart_content_shopList").append(div);
			}
			checkLength = $(".cart_content_shopList input:checked").length;
			//
			var price = $(".cart_content_shopList_tab_price span").html();
			$(".cart_content_shopList_tab_del").click(function() {
				var myid = $(this).attr("myid");
				$(this).parent().remove();
				sum();
				var todo = AV.Object.createWithoutData('HSJ_cart', myid);
				todo.destroy().then(function(success) {
					// 删除成功
					alert("删除成功");
				}, function(error) {
					// 删除失败
				});
			})

			//顶部全选
			$(".cart_content_top input").click(function() {
				if($(this).is(':checked')) {
					$(".cart_content_shopList_tab").addClass("cart_checked_color")
					$("[type='checkbox']").prop("checked", true);
					sum();
				}
				if(!$(this).is(':checked')) {
					$(".cart_content_shopList_tab").removeClass("cart_checked_color")
					$("[type='checkbox']").prop("checked", false);
					$(".sum").html(0);
				}
				sum();
			})

			//底部全选
			$(".cart_footer_paying input").click(function() {
				if($(this).is(':checked')) {
					$(".cart_content_shopList_tab").addClass("cart_checked_color");
					$("[type='checkbox']").prop("checked", true);
					sum();
				}
				if(!$(this).is(':checked')) {
					$(".cart_content_shopList_tab").removeClass("cart_checked_color");
					$("[type='checkbox']").prop("checked", false);
					$(".sum").html(0);
				}
				sum();
			})
			//底部删除已选中的
			$(".cart_footer_paying_delShopList").click(function() {
				for(var i = 0; i < $(".cart_content_shopList input:checked").length; i++) {
					var myid = $(".cart_content_shopList input:checked").eq(i).parent().children(":last-child").attr("myid");
					console.log(myid);
					var todo = AV.Object.createWithoutData('HSJ_cart', myid);
					todo.destroy().then(function(success) {
						// 删除成功
					}, function(error) {
						// 删除失败
					});
				}
				if($(".cart_content_shopList input").is(":checked")) {
					$(".cart_content_shopList input:checked").parent().remove();
					sum();
				}
			})
			//选中变色
			$(".cart_content_shopList_tab input").click(function() {
				if($(this).prop("checked")) {
					$(this).parent().addClass("cart_checked_color");

					if(!$(".cart_content_shopList_tab input").is(':checked')) {
						$(".cart_content_top input").prop("checked", false);
						//						sum();
					}
					sum();
				} else {
					$(this).parent().removeClass("cart_checked_color");
					sum();
				}
			})
			sum();

		}).catch(function(error) {
			console.log(JSON.stringify(error));
		});

		function myadd(myid, t) {
			var price = $(".cart_content_shopList_tab_price span").html();
			var num = $(t).prev().html();
			$(t).prev().html(++num);
			$(t).parent().parent().children('.cart_content_shopList_tab_sum').children().html(price * num);
			sum();
			var todo = AV.Object.createWithoutData('HSJ_cart', myid);
			// 修改属性
			todo.set('cartnum', "" + num + "");
			// 保存到云端
			todo.save();
		}

		function myreduce(myid, t) {
			var price = $(".cart_content_shopList_tab_price span").html();
			var num = $(t).next().html();
			$(t).next().html(num > 1 ? --num : 1);
			$(t).parent().parent().children('.cart_content_shopList_tab_sum').children().html(price * num);
			sum();
			var todo = AV.Object.createWithoutData('HSJ_cart', myid);
			// 修改属性
			todo.set('cartnum', "" + num + "");
			// 保存到云端
			todo.save();
		}

		function sum() {
			console.log(checkLength + "+初始化");
			var n = 0;
			var newCheckLength = $(".cart_content_shopList input:checked").length;
			for(var i = 0; i < $(".cart_content_shopList input:checked").length; i++) {
				var a = parseInt($(".cart_content_shopList input:checked").eq(i).parent().children().eq(5).children().html());
				n += a;
				//				console.log(a)
			}
			if(checkLength != newCheckLength) {
				$(".cart_content_top input").prop("checked", false);
				$(".cart_footer_paying input").prop("checked", false);
			} else {
				$(".cart_footer_paying input").prop("checked", true);
				$(".cart_content_top input").prop("checked", true);
			}
			$(".cart_footer_txt span").html(newCheckLength);
			console.log(newCheckLength);
			$('.sum')[0].innerHTML = n;
		}

		function getidurl(name) {
			var myurl = location.search;
			var start = myurl.indexOf(name + "=");
			if(start != -1) {
				start = start + name.length + 1;
				var end = myurl.indexOf("&", start);
				if(end == -1) {
					end = myurl.length;
				}
				//转义
				return decodeURI(myurl.substring(start, end));
			}
		}
		//
		$(".cart_footer_payBtn").click(function() {
			for(var i = 0; i < $(".cart_content_shopList input:checked").length; i++) {
				var myid = $(".cart_content_shopList input:checked").eq(i).parent().children(":last-child").attr("myid");
				var todo = AV.Object.createWithoutData('HSJ_cart', myid);
				todo.destroy().then(function(success) {
					// 删除成功
				}, function(error) {
					// 删除失败
				});
			}
			var sumprice = $(".sum").html();
			location.href = "payfor2.html?price=" + sumprice;
		});
	</script>

</html>